<template>
    <form-item
        :designer="designer" 
        :field="field"
    >
        <span class="static-text" :class="{preWrap:preWrap}">{{ state.fieldVal}}</span>
    </form-item>
</template>

<script setup>
import { reactive,onMounted,nextTick, computed } from 'vue';
import FormItem from './form-item.vue';
defineOptions({
    name:"xy-static-text"
})
const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    formModel:{
        type:Object,
        default:()=>({})
    }
})

const state = reactive(({
    fieldVal:"",
}))

const setFieldVal = val=>{
    state.fieldVal = val
}

const textAlign = computed(()=>{
    return props.field.options.textAlign
})

const fontSize = computed(()=>{
    return props.field.options.fontSize + 'px'
})
const preWrap = computed(()=>{
    return props.field.options.preWrap
})
onMounted(()=>{
    if(props.field && props.field.options.textContent){
        // 存在默认值的情况下进行初始化
        setFieldVal(props.field.options.textContent)
    }

    nextTick(()=>{
        if(!props.designer) return
        props.designer.createFieldValFun(props.field.id, setFieldVal)
    })
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item)    {
    .el-form-item__label{
        overflow: hidden!important;
        width: 0!important;
    }
    .el-form-item__content{
        justify-content: v-bind(textAlign);
        font-size: v-bind(fontSize);
    }
}
.static-text{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preWrap{
    // overflow: none;
    // text-overflow: none;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
</style>
